<route lang="json5" type="serviceDetail">
{
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '委办详情',
  },
}
</route>
<template>
  <view class="service_detail_container">
    <view class="title_box">
      <img src="../../static/images/ic_voyage_tab_back.png" />
      <text>{{ t('service.shipownerService') }}</text>
      <text class="right_text">{{ t('service.transferBtn') }}</text>
    </view>
    <view class="top_box">
      <img src="../../static/images/freighter.png" />
      <view class="msg_box">
        <text>IKEBANA 38SF</text>
        <text>
          {{ t('service.expected') }}2024-09-22 06:00:00{{ t('service.address') }}Qingdao Pt
        </text>
      </view>
      <view>
        <text>{{ t('service.details') }}</text>
      </view>
    </view>
    <view class="msg_content">
      <view class="item pd-l-30 pd-r-30" v-for="(item, index) in dataList" :key="index">
        <text>{{ item.label }}</text>
        <text>{{ item.value }}</text>
      </view>
      <view class="item pd-l-30 pd-r-30">
        <text>{{ t('service.remarks') }}</text>
        <textarea
          v-model="remarks"
          :placeholder="t('service.hintInput')"
          placeholder-class="textarea-placeholder"
        />
      </view>
      <view class="finish_btn">
        <text>{{ t('service.finishedBtn') }}</text>
      </view>
    </view>
  </view>
</template>
<script lang="ts" setup>
import { ref, reactive } from 'vue'
import { useI18n } from 'vue-i18n'
const { t } = useI18n()


defineOptions({
  name: 'Notice',
})
// 获取屏幕边界到安全区域距离
// const { safeAreaInsets } = uni.getSystemInfoSync()

// 测试 uni API 自动引入
// onload(() => {})
const remarks = ref('')
const dataList = reactive([
  {
    label: computed(() => t('service.eventType')),
    value: '更换船员',
  },
  {
    label: computed(() => t('service.consignor')),
    value: 'S5 ASIA LIMITED',
  },
  {
    label: computed(() => t('service.operator')),
    value: '曹栋国',
  },
  {
    label: computed(() => t('service.requests')),
    value: '--',
  },
  {
    label: computed(() => t('service.assignmentDate')),
    value: '2024-02-05 10:04:58',
  },
  {
    label: computed(() => t('service.deadline')),
    value: '2024-02-07 00:00:00',
  },
  {
    label: computed(() => t('service.completionTime')),
    value: '未完工',
  },
])
</script>
<style lang="scss" scoped>
.pd-l-30 {
  padding-left: 30rpx !important;
}
.pd-r-30 {
  padding-right: 30rpx !important;
}
.service_detail_container {
  width: 100vw;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: scroll;
  background-color: #f8f9fb;
  scrollbar-width: none; /* 隐藏滚动条（Firefox） */
  &::-webkit-scrollbar {
    display: none; /* 隐藏滚动条 */
  }
  .top_box {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30rpx 30rpx 26rpx 140rpx;
    font-size: 22rpx;
    color: #fff;
    background-color: #295699;
    border: none;
    img {
      position: absolute;
      top: 50%;
      left: 30rpx;
      width: 80rpx;
      margin-right: 20rpx;
      transform: translateY(-50%);
    }
    .msg_box {
      display: flex;
      flex-direction: column;
      font-size: 20rpx;
      color: #6689c0;
      text {
        margin-bottom: 4rpx;
        &:nth-child(1) {
          font-size: 26rpx;
          color: #fff;
        }
      }
    }
  }
  .msg_content {
    padding-bottom: 40rpx;
    background-color: #fff;
    .item {
      display: flex;
      justify-content: space-between;
      padding: 30rpx 0;
      background-color: #fff;
      border-top: 2rpx solid #f8f9fb;
      text {
        &:nth-child(1) {
          font-size: 24rpx;
          color: #1c1c1c;
        }
        &:nth-child(2) {
          font-size: 22rpx;
          color: #656565;
        }
      }

      textarea {
        width: 80%;
        height: 80rpx;
        padding: 30rpx 10rpx;
        border: 2rpx solid #ebebeb;
        border-radius: 10rpx;
      }
      .textarea-placeholder {
        font-size: 22rpx;
      }
    }
    .finish_btn {
      box-sizing: border-box;
      display: flex;
      justify-content: center;
      margin-top: 60rpx;
      font-size: 24rpx;
      color: #fff;
      text-align: center;

      text {
        width: 85%;
        padding: 16rpx 0;
        background-color: #3b7fe2;
        border-radius: 10rpx;
      }
    }
  }
}
</style>
